<template>
  <div class="email-container">
    <div class="item-top">
      <div class="title mt-16" ref="title">Star Reports</div>
      <div class="filter-btns">
        <a-radio-group :value="notificationService.starAction" @change="change">
          <a-radio value="AND">AND</a-radio>
          <a-radio value="OR">OR</a-radio>
        </a-radio-group>

      </div>

    </div>

    <div class="sub-title">可选</div>
    <a-transfer :rowKey="record => record.id" :data-source="StarList" :titles="['', '']"
      :render="item => item.templateName" :target-keys="targetKeys" :selected-keys="selectedKeys" :list-style="{
        width: '50%',
        height: '180px',
      }" @change="handleChange" @selectChange="handleSelectChange" @scroll="handleScroll" />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  props: {
    // StarList: {
    //   type: Array
    // }
    title:String
  },
  data() {
    return {
      targetKeys: [],
      selectedKeys: []
    };
  },
  computed: {
    ...mapState('emailNotification', ['notificationService', 'StarList'])
  },
  mounted() {
    const emailRow = JSON.parse(localStorage.getItem('emailRow') ?? '{}');

    if (Object.values(emailRow)?.length > 0) {
      this.targetKeys = emailRow.starList;
    }
    this.$emit('sendClick');
  },
  methods: {
    getTitle(){
      return this.$refs.title.innerHTML
    },
    ...mapMutations('emailNotification', ['setState']),
    change(e) {
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, starAction: e.target.value }});
    },
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys;
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, starList: nextTargetKeys }});
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, starList: targetSelectedKeys }});
    },
    handleScroll() {

    }
  }
};
</script>
<style lang="less" scoped>
.container {
    margin: 20px 0;
    h4 {
        text-align: left;
        padding-left: 30px;
    }
}
</style>
